import React,{Component} from 'react';
import { Form, Input, Button, Table, message, Modal } from 'antd';
import { Link, history} from 'react-router-dom';
import axios from 'axios';
import './index.less';
const FormItem = Form.Item;
const { TextArea } = Input;

axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'

class join extends React.Component {
	constructor(props){
		super(props)
		this.state = {
			data: [],
			getCode: ''
		}
	}
	
	handleCode =()=>{
	  const _this = this;
	  let sec = 60;
	  const clickTime = new Date().getTime();
	  localStorage.setItem("changeJoinclickTime",clickTime);
	  const mobile = this.props.oldMobile;
	  const Token = localStorage.getItem("token");
	  if(this.state.getCode !== '获取验证码'){
			return false;
		}
	    axios({
	      method: 'get',
	      url: '/api/customer/rest/sendMsg?mobile='+ mobile,
	      headers: {
	        'Content-Type': 'application/json',
	        Authorization:Token,
	      }
	    })
	    .then(function(response){
	      if(response.data.code == '201'){
	        message.warning('请输入正确的手机号');
	      }else if(response.data.code == '202'){
	        message.warning('获取手机验证码失败');
	      }else if(response.data.code == '200') {
	        const timer = setInterval(function(){
	          sec--;
	          if(sec < 0){
	            clearInterval(timer);
	            _this.setState({
	              getCode:  '获取验证码',
	            })
	            localStorage.setItem("changeJoinclickTime","");
	          }else {
	            _this.setState({
	              getCode:  sec + 's 后重新获取',
	            })
	          }
	        },1000)
	      }
	    })
	}
	componentWillMount(){
		const _this = this;
		const nowDate = new Date().getTime();
		let sec = localStorage.getItem("changeJoinclickTime");
		const currentTime = (nowDate - sec)/1000;
		let delta = Math.round(60 - currentTime);
		const timer = setInterval(function(){
		  delta--;
		  if(delta < 0){
		    clearInterval(timer);
		    _this.setState({
		      getCode:  '获取验证码',
		    })
		  }else {
		    _this.setState({
		      getCode:  delta + 's 后重新获取',
		    })
		  }
		},1000)
	}


	render(){
		const { visible, onCancel, oldMobile, realName, onModalOk, form} = this.props;
		const { getFieldDecorator } = form;
		const disabled = (localStorage.getItem('sandbox') == 0) ? 'disabled': '';
		const disabledBtn = this.state.getCode !== '获取验证码' ? "disabled" : "";
		return(
				<Modal
					title="加入一个组织："
					okText="加入"
                	cancelText="取消"
					visible = {visible}
					onCancel = {onCancel}
					onOk = {onModalOk.bind(this,this)}
				>
				<div className="joinBoxModal">
					<Form>
						<div className="joinBox-bd">
							<FormItem
			                    label="邀请码"
			                    labelCol={{ span: 6 }}
			                    wrapperCol={{ span: 14 }}
			                >
			                    {getFieldDecorator('code', {
			                        rules: [{required: true, message: '请输入您收到的邀请码!',}],
			                    })(
			                        <Input placeholder="请输入您收到的邀请码" maxLength={4} onBlur={this.maxLength} />
			                    )}
			                </FormItem>
							<FormItem
			                    label="真实姓名"
			                    labelCol={{ span: 6 }}
			                    wrapperCol={{ span: 14 }}
			                >
			                    <Input disabled value={realName} />
			                </FormItem>
							<FormItem className="namePhone"
			                    label="预留手机号码"
			                    labelCol={{ span: 6 }}
			                    wrapperCol={{ span: 14 }}
			                >
		                    	<div>
			                        <Input disabled value={oldMobile} />
			                          <Button
			                            className="yzmBtn"
			                            type= "primary"
			                            size="small"
			                            disabled={disabledBtn}
			                            onClick = {this.handleCode}
			                          >
			                          {this.state.getCode}
			                        </Button>
		                        </div>
			                </FormItem>
			                <FormItem
			                    label="验证码"
			                    labelCol={{ span: 6 }}
			                    wrapperCol={{ span: 14 }}
			                >
			                    {getFieldDecorator('yzmCode', {
			                        rules: [{required: true, message: '请输入短信验证码，仅限数字', pattern: /^[0-9]+$/}],
			                    })(
			                        <Input placeholder="请输入短信验证码，仅限数字" maxLength={8} />
			                    )}
			                </FormItem>
							<FormItem
			                    label="申请说明"
			                    labelCol={{ span: 6 }}
			                    wrapperCol={{ span: 16 }}
			                >
			                    {getFieldDecorator('reason', {
			                        rules: [{required: false, message: '请输入申请说明',}],
			                    })(
			                        <TextArea className="textarea" autosize={{ minRows: 5, maxRows: 6 }} placeholder="请输入加入理由" />
			                    )}
			                </FormItem>
						</div>
					</Form>	
				</div>
				</Modal>
			)
	}
}
const Join = Form.create()(join);
export default Join